<template>
  <div class="home">
    <!-- ref对象，在template里面，vue会自动给解包，只需要写变量名称就可以了，不用写age.value。 -->
    <h1>age: {{ age }}</h1>
    <button type="button" @click="updateAge">age++</button>
    <h3>count:{{ count }}</h3>
    <button type="button" @click="updateCount">count++</button>
    <hr />
    <HelloWorld :age="age" :count="count" @addAge="updateAge" @addCount="updateCount"></HelloWorld>
  </div>
</template>

<script>
import { ref, onBeforeMount, onUpdated } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  created() {
    // console.log(this.$axios)
  },
  // setup选项，可以写vue3的语法, 创建的函数，变量，等数据，必须通过return 返回一个对象，
  // 对象里面包括了要在setup外面使用的变量、函数等名称。
  setup() {
    let age = ref(1) // 如果值是基本数据类型，使用ref()来创建一个响应式的变量。
    // console.log(age.value)  // 1
    const updateAge = () => {
      age.value = age.value + 1 // 使用ref响应式变量的值，要调用value属性。
    }

    let count = ref(1000)

    const updateCount = () => {
      count.value = count.value + 1
    }
    // 生命周期函数的使用。
    onBeforeMount(() => {
      console.log('我今年' + age.value + '岁。')
    })

    onUpdated(() => {
      console.log('我今年' + age.value + '岁。')
    })
    onUpdated(() => {
      console.log('我有' + count.value + '元。')
    })
    return {
      age,
      updateAge,
      count,
      updateCount
    }
  }
}
</script>
